import React, { Component } from 'react';
import { 
  Form,
  Input,
  Button
} from 'antd';

const ButtonGroup = Button.Group;
const FormItem = Form.Item;

class SettingForm extends Component {
  render(){
    const {
      form : {
        getFieldDecorator,
        validateFieldsAndScroll,
        getFieldError
      },
      code,
      name,
      num,
      money,
      signal,
      onOk,
      onCancel
    } = this.props;
    return (
      <div>
        <FormItem label="股票代码">
          <span>{code}</span>
        </FormItem>
        <FormItem label="股票名称">
          <span>{name}</span>
        </FormItem>
        <FormItem label="持仓数量">
          {
            getFieldDecorator("num", {
              initialValue : num,
              rules : [
                {
                  required : true,
                  message : '持仓数量不能为空'
                },{
                  pattern : /^[0-9]*$/gi,
                  message : '请检查持仓数量是否填写正确'
                }
              ]
            })(<Input placeholder="填写持仓数量"></Input>)
          }
        </FormItem>
        <FormItem label={signal===0 ? "卖出金额" : "买入金额"}>
          {
            getFieldDecorator("money", {
              initialValue : money,
              rules : [
                {
                  required : true,
                  message : '金额不能为空'
                },{
                  pattern : /^[0-9]*$/gi,
                  message : '请检查金额是否填写正确'
                }
              ]
            })(<Input placeholder="填写金额"></Input>)
          }
        </FormItem>
        <ButtonGroup>
          <Button type="danger" onClick={onCancel}>取消</Button>
          <Button 
            type="primary"
            disabled={
              !!getFieldError("allmoney")
              }
            onClick={()=>{
              validateFieldsAndScroll((err, values)=>{
                if(!err){
                  const opt = {
                    ...values,
                    code,
                    name,
                    signal
                  }
                  onOk(opt)
                }
              })
            }}
          >确定</Button>
        </ButtonGroup>
      </div>
    )
  }
}

export default Form.create()(SettingForm)